<template>
  <a-space direction="vertical" size="large" fill>
    <a-descriptions
        :data="descriptions"
        :column="props.column"
        :title="props.title"
        :layout="props.layout"
        :bordered="props.bordered"
        table-layout="fixed"
        :size="props.size"
        :label-style="props.labelStyle"
        :value-style="props.valueStyle"
    >
      <a-descriptions-item v-for="item in descriptions" :label="item.label">
        <template v-if="item.formType === 'upload'">
          <a-image-preview-group infinite v-if="isArray(item.value)">
            <a-space>
              <a-image v-for="src in item.value" :src="tool.viewImage(src)" width="50" />
            </a-space>
          </a-image-preview-group>
          <a-image v-else :src="tool.viewImage(item.value)" width="50"></a-image>
        </template>
        <template v-else-if="item.infoSlot">
          <slot :name="item.dataIndex" :row="item" :data="data"></slot>
        </template>
        <template v-else-if="(item.formType === 'radio' || item.formType === 'select')">
          <a-tag color="blue">{{
              item.dict.data.find((row) => row.value == item.value)?.label
            }}</a-tag>
        </template>
        <div v-else>
          {{ item.value }} {{ item?.textAppend }}
        </div>
      </a-descriptions-item>
    </a-descriptions>
  </a-space>
</template>

<script setup>
import {getCurrentInstance, inject, provide, ref, watch} from "vue";
import tool from "@/utils/tool";
import {get, isArray, isBoolean, isEmpty, isFunction} from "lodash";
import { loadDict } from '@cps/ma-form/js/networkRequest.js'
import globalColumn from '@/config/column.js'
import commonApi from "@/api/common";
const dictList = {}
const app = getCurrentInstance().appContext.app;
const columns = ref([]);
const data = ref({});
const descriptions = ref([]);
const dictData = ref([])
const props = defineProps({
  columns: { type: Array, default: [] },
  data: {},
  column: {default: 3},
  title: {
    default: "",
  },
  bordered: {
    default: true,
  },
  layout: {
    default: "vertical",
  },
  labelStyle: {
    default: {},
  },
  valueStyle: {
    default: {},
  },
  size: {
    default: "large",
  },
});

watch(
    () => props.columns,
    (vl) => {
      columns.value = vl;
    },
    { deep: true, immediate: true }
);

const reset = (vl) => {
  data.value = vl;
  descriptions.value = [];
  if (!columns.value) {
    return ;
  }
  columns.value.forEach(async (item) => {
    let value = null
    if (isEmpty(item) || item.dataIndex === "__operation" || item.infoShow === false) {
      return;
    }
    if (isBoolean(item.common) && item.common && globalColumn[item.dataIndex]) {
      item = globalColumn[item.dataIndex]
    }
    if (item.dict) {
        await loadDict(dictList, item)
        item.dict.data = dictList[item.dataIndex] ?? []
    }
    if (isFunction(item.customRender)) {
      value = item.customRender({record: data.value})
    }
    descriptions.value.push({
      ...item,
      label: item.title,
      value: value ?? get(data.value, item.dataIndex),
    });
  });
}

watch(
    () => props.data,
    (vl) => {
      reset(vl)
    },
    { deep: true, immediate: true }
);

defineExpose({reset,})
</script>

<style scoped></style>
